<template>
  <div>
    <!-- 声明式导航： router-link组件 -->
    <!-- 作用： 用来跳转页面的 -->
    <!-- 注意： to属性不能省略 -->

    <!-- 了解：  -->
    <router-link to="/find">发现</router-link> |
    <router-link to="/friend">朋友</router-link> |
    <router-link to="/my">我的</router-link> |
    <router-link to="/home">首页</router-link> |

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style>
/* 模糊匹配 */
/* ❌用不到 */
.router-link-active {
  color: pink;
}

/* 精准配置 */
/* ❌用不到 */
/* .router-link-exact-active {
} */
</style>
